<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        let chks = document.getElementsByName('chkHobby');

        // 全选函数
        function selectAll() {
            for (let i = 0; i < chks.length; i++) {
                chks[i].checked = true;
            }
        }

        // 取消操作
        function selectNone() {
            for (let i = 0; i < chks.length; i++) {
                chks[i].checked = false;
            }
        }

        // 反选操作
        function selectReverse() {
            for (let i = 0; i < chks.length; i++) {
                chks[i].checked = !chks[i].checked;
            }
        }
    </script>
</head>
<body>
<div id="root">
    <form id="frm_1">
        <fieldset>
            <legend>爱好</legend>
            <input type="checkbox" name="chkHobby" value="internet"/>上网
            <input type="checkbox" name="chkHobby" value="reading"/>阅读
            <input type="checkbox" name="chkHobby" value="games"/>游戏
            <input type="checkbox" name="chkHobby" value="sports"/>运动
            <input type="checkbox" name="chkHobby" value="shopping"/>购物
        </fieldset>
        <input type="button" name="btn" value="全选" onclick="selectAll()"/>
        <input type="button" name="btn" value="反选" onclick="selectReverse()"/>
        <input type="button" name="btn" value="取消" onclick="selectNone()"/>
    </form>
</div>
</body>
</html>